<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/fragment :: head('分类管理')">
</head>
<body>
<!--导航 ui表示ui inverted与当前色相反  attached表依附，去圆角  segment表片段-->
<div th:replace="admin/fragment :: menu(2)"></div>
<!--菜单中选中的样式  pointing-->
<div class="ui menu attached pointing right aligned">
    <div class="ui container">
        <div class="right menu">
            <a href="#" class="item">发布</a>
            <a href="#" class="ui item active teal">列表</a>
        </div>
    </div>
</div>
<!--中间内容-->
<div class="m-padded-tb-large m-container">
    <div class="ui container">
        <div class="ui message" th:unless="${#strings.isEmpty(message)}" th:classappend="${success ?'positive':'negative'}">
            <i class="icon close"></i>
            <div class="header">提示</div>
            <p th:text="${message}">操作成功！</p>
        </div>
        <!--celled  网格线-->
        <table class="ui compact table">
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="type,iterStat : ${page.content}">
                <td th:text="${iterStat.count + (page.getNumber())*page.getSize()}"></td>
                <td th:text="${type.name}">刻意练习清单</td>
                <td>
                    <a th:href="@{/admin/types/{id}/input(id=${type.id})}" class="ui button basic teal m-padded-small edit">编辑</a>
                    <!--<a href="#" th:href="@{/admin/types/{id}/delete(id=${type.id})}" class="ui button basic red m-padded-small delete">删除</a>-->
                    <!--向js里传入参数的方法-->
                    <!--<a href="#" th:data-t_id="${type.id}" th:data-t_name="${type.name}"  th:onclick="'setDelParam('+${type.id}+',' + ${type.name}+')'" class="ui button basic red m-padded-small delete">删除</a>-->
                    <!--注意这里传值的方法 将要传的参数放到data域中-->
                    <a th:data-t_id="${type.id}" th:data-t_name="${type.name}"  th:onclick="setDelParam(this.getAttribute('data-t_id'),this.getAttribute('data-t_name'))" class="ui button basic red m-padded-small delete">删除</a>

                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <!--colspan 合并单元格-->
                <th colspan="6">
                    <a th:href="@{/admin/types/add}" class="ui button left floated teal teal mini">新增</a>
                    <div class="ui right floated pagination menu mini" th:unless="${page.getTotalPages() == 1}">
                        <a th:href="@{/admin/types/(page=${page.getNumber()-1})}" class="icon item"  th:unless="${page.isFirst()}">
                            <i class="left chevron icon"></i>
                        </a>
                        <div th:each="idx:${#numbers.sequence(0,page.getTotalPages()-1)}" >
                            <a class="item" th:text="${idx+1}" th:href="@{/admin/types/(page=${idx})}" th:classappend="${idx == page.getNumber()} ? 'active'"></a>
                        </div>
                        <a class="icon item" th:href="@{/admin/types/(page=${page.getNumber()+1})}" th:unless="${page.isLast()}" >
                            <i class="right chevron icon"></i>
                        </a>
                    </div>
                </th>
            </tr>

            </tfoot>
        </table>
    </div>
</div>
<div class="ui small modal">
    <i class="close icon"></i>
    <div class="header">
        删除分类
    </div>
    <div class="content">
        <p>确定删除该分类吗？</p>
    </div>

    <div class="actions">
        <div class="ui button negative ">取消</div>
        <div class="ui button approve positive right">确定</div>
    </div>
</div>
<input type="hidden" id="deleteId">
<!--底部  vertical垂直-->
<!--<div th:replace="admin/fragment :: footer"></div>-->


<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $(".message .close").on('click',function () {
        $(this).closest(".message").transition('fade');
    });

    function showDelete() {
        $('.small.modal').modal({
            onApprove : function() {
                // window.location.href="/admin/types/"+Number($("#deleteId").val())+"/delete";
                window.location.href="/admin/types/"+$("#deleteId").val()+"/delete";
            }
        })
            .modal('show')
        ;
    }
    function setDelParam(id,name){
        $("#deleteId").val(id);
        $("#deleteName").val(name);
        showDelete();
    }



</script>


</body>

</html>